<template>
	<div class="classAlbumContainer">
		<el-dialog	
		  :visible.sync="isShow"			 
		  custom-class="el-dialog-bg"
		  :before-close="handleClose">
		  <div slot="title" class="panel_title">
		  	<span>{{componentname}}</span>&nbsp;&nbsp;
		  	<div class="upload-class" @click="choosefile">
		  		<span>上传图片</span>
		  		<input id="upload"  name="file" type="file" multiple  accept="image/png,image/gif,image/jpeg" @change="updatefile"/>
		  	</div>
		  	
		  <!--	<a href="javascript:void(0);" style="font-size:0.2rem;">上传图片</a>-->
			  <!--<el-upload
				  class="upload-class"
				  action="https://jsonplaceholder.typicode.com/posts/"
				  :on-preview="handlePreview"
				  :on-remove="handleRemove"
				  :before-remove="beforeRemove"
				  multiple
				  :limit="3"
				  :on-exceed="handleExceed"
				  >
				  <el-button  size="small" type="success" @click="submitUpload">上传图片</el-button>
			 </el-upload>-->
		  </div>
          
          <div class="classalbum">
          	    
          	    <div class="album" v-for="album in albumlist">
          	    	
          	    	<div class="timetitle"><span>{{album.datetime}}</span>&nbsp;<span>上传</span></div>
          	    	<div class="imgbox" v-for="img in album.imglist">
          	    		<div class="img"></div>
          	    		<div class="imginfo">
          	    			<span class="left">{{img.imgname}}</span>
          	    			<span class="right"><a href="javascript:void(0);">删除</a></span>
          	    		</div>
          	    	</div>
          	    	
          	    </div>
          	    
          </div>
          
		</el-dialog>
	</div>
</template>

<script>
	import {mapState,mapGetters,mapActions} from 'vuex'; //先要引入
	export default {
		props:["componentname"],
		data(){
			return {
				
				albumlist:[
				 {
				 	datetime:'2019-03-12 18:00',
				 	imglist:[
				 	  { imgid:'1',
				 	  	imgurl:'',
				 	  	imgname:'图片1'
				 	 },{ imgid:'1',
				 	  	imgurl:'',
				 	  	imgname:'图片1'
				 	 },{ imgid:'1',
				 	  	imgurl:'',
				 	  	imgname:'图片1'
				 	 },{ imgid:'1',
				 	  	imgurl:'',
				 	  	imgname:'图片1'
				 	 },{ imgid:'1',
				 	  	imgurl:'',
				 	  	imgname:'图片1'
				 	 },{ imgid:'1',
				 	  	imgurl:'',
				 	  	imgname:'图片1'
				 	 },{ imgid:'1',
				 	  	imgurl:'',
				 	  	imgname:'图片1'
				 	 },{ imgid:'1',
				 	  	imgurl:'',
				 	  	imgname:'图片1'
				 	 },{ imgid:'1',
				 	  	imgurl:'',
				 	  	imgname:'图片1'
				 	  }
				 	]
				},{
				 	datetime:'2019-03-12 17:00',
				 	imglist:[
				 	  { imgid:'1',
				 	  	imgurl:'',
				 	  	imgname:'图片1'
				 	 },{ imgid:'1',
				 	  	imgurl:'',
				 	  	imgname:'图片1'
				 	  }
				 	]
				},{
				 	datetime:'2019-03-12 16:00',
				 	imglist:[
				 	  { imgid:'1',
				 	  	imgurl:'',
				 	  	imgname:'图片1'
				 	 },{ imgid:'1',
				 	  	imgurl:'',
				 	  	imgname:'图片1'
				 	  },{ imgid:'1',
				 	  	imgurl:'',
				 	  	imgname:'图片1'
				 	  }
				 	]
				},{
				 	datetime:'2019-03-12 15:00',
				 	imglist:[
				 	  { imgid:'1',
				 	  	imgurl:'',
				 	  	imgname:'图片1'
				 	  }
				 	]
				 }
				]
			}
		},
		methods:{
			handleClose(){
				this.$store.dispatch('classAlbum/hideclassAlbumPanel');
			},
			
		    handleRemove(file, fileList) {
		        console.log(file, fileList);
		    },
		    handlePreview(file) {
		        console.log(file);
		    },
		    updatefile(e){
			    let files = e.target.files;//获取所有的文件
			   
			    let filenum = files.length;//文件数量
			    let filesize=0;
			    let param = new FormData(); //创建form对象
			    param.append("length",filenum);
		        for(let i=0;i<files.length;i++){
		        	filesize+=files[i].size;
		        	param.append('file',files[i],files[i].name);//通过append向form对象添加数据
		        	
		        }
		        filesize = filesize/(1024*1000);
		        
		        api.uploadPhone(param).then(function(data){
		        	console.log(data)
		        })
		       
		            
		          
		        
		       
		    },
		    choosefile(){
		    let f = document.getElementById("upload");
                f.click();
		    }
		},		
		computed:{		
    	 ...mapState({                            
					  isShow:state=>state.classAlbum.classAlbumDialog					
					})
        }
	}
	
</script>

<style lang="scss">
	.classAlbumContainer{
		
		.classalbum{
			width:100%;
			height: 5rem;
			padding:0 .3rem 0 .3rem;
		    overflow: auto;
			.album{
				width:100%;
				float: left;
				background: #DDE9E9;
				margin-bottom: .1rem;
				border-radius: 5px;
				.timetitle{
					width:100%;
					height: .3rem;
					line-height: .3rem;
					text-indent: .1rem;
				}
				
				.imgbox{
					width:20%;
					height: 1.5rem;
					text-align: center;
					float: left;
					padding:.1rem;
					
					.img{
						width:1.5rem;
						height: 1rem;
					/*	background: url(../../../../static/img/activity2.jpg);*/
						background-size: cover;
					
					}
					.imginfo{
						width:1.5rem;
						height: .3rem;
						line-height: .3rem;
						margin-top:.1rem;
						
						.left{
							float: left;
						}
						.right{
							float: right;
						}
					}
				}
			}
		}
		/**自定义对话框标题样式**/
		.panel_title{
			font-size: .3rem;
			text-indent: .2rem;
			height: .8rem;			
			line-height: .8rem;
			span{
				float: left;
			}
			.upload-class{				
				width:1.5rem;
				height: .8rem;
				float: left;	
				font-size:.2rem;	
				cursor: pointer;
				color: blue;											
			}
		}
		/**
		 * 自定义对话框样式
		 */
		.el-dialog-bg{
			background: #F4F5F6;
			width:900px;
			.el-dialog__header{
				padding: 0px;
			}
			.el-dialog__body{
				padding: 0px;
			}	
			.el-dialog__footer{
				padding: .3rem;
				.footer-btn{
					width:100%;
					text-align: center;									
			   }
			}		
		}
	}
	
</style>